import { useState } from 'react'
import { NavBar, Button, Input } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  const [formData, setFormData] = useState({
    relationship: '',
    name: '',
    idNumber: '',
    birthDate: '',
    gender: '',
    phone: '13114662821'
  })
  const [showDatePicker, setShowDatePicker] = useState(false)
  const [selectedDate, setSelectedDate] = useState({
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    day: new Date().getDate()
  })

  const handleBack = () => {
    nav(-1)
  }

  const handleRelationshipSelect = (relationship: string) => {
    setFormData(prev => ({ ...prev, relationship }))
  }

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

  const handleDatePickerShow = () => {
    setShowDatePicker(true)
  }

  const handleDatePickerCancel = () => {
    setShowDatePicker(false)
  }

  const handleDatePickerConfirm = () => {
    const dateString = `${selectedDate.year}-${selectedDate.month.toString().padStart(2, '0')}-${selectedDate.day.toString().padStart(2, '0')}`
    setFormData(prev => ({ ...prev, birthDate: dateString }))
    setShowDatePicker(false)
  }

  const handleDateChange = (type: 'year' | 'month' | 'day', value: number) => {
    setSelectedDate(prev => ({ ...prev, [type]: value }))
  }

  // 生成年份选项
  const generateYears = () => {
    const years = []
    for (let year = 1900; year <= 2030; year++) {
      years.push(year)
    }
    return years
  }

  // 生成月份选项
  const generateMonths = () => {
    return Array.from({ length: 12 }, (_, i) => i + 1)
  }

  // 生成日期选项
  const generateDays = () => {
    const daysInMonth = new Date(selectedDate.year, selectedDate.month, 0).getDate()
    return Array.from({ length: daysInMonth }, (_, i) => i + 1)
  }

  const handleSave = () => {
    // 表单验证
    if (!formData.relationship) {
      alert('请选择与您的关系')
      return
    }
    if (!formData.name) {
      alert('请输入姓名')
      return
    }
    if (!formData.idNumber) {
      alert('请输入身份证号')
      return
    }
    if (!formData.birthDate) {
      alert('请选择出生日期')
      return
    }
    if (!formData.gender) {
      alert('请选择性别')
      return
    }

    // 保存逻辑
    console.log('保存档案:', formData)
    alert('档案保存成功')
    nav(-1)
  }

  const relationships = ['本人', '配偶', '父母', '子女', '亲戚', '朋友', '其他']

  return (
    <div style={{ 
      width: '100vw', 
      minHeight: '100vh', 
      background: '#fff' 
    }}>
      {/* 导航栏 */}
      <NavBar 
        onBack={handleBack} 
        style={{ 
          background: '#fff',
          borderBottom: '1px solid #f0f0f0'
        }}
      >
        新建档案
      </NavBar>

      {/* 警告横幅 */}
      <div style={{
        background: '#fff7e6',
        border: '1px solid #ffd591',
        padding: '12px 16px',
        margin: '0',
        fontSize: '14px',
        color: '#d46b08',
        lineHeight: '1.4'
      }}>
        根据国家有关规定,就诊人在未实名认证状态下,平台将无法提供诊断、药品、挂号等服务,请及时实名认证!
      </div>

      {/* 基本信息标题 */}
      <div style={{
        padding: '20px 16px 16px',
        fontSize: '18px',
        fontWeight: 'bold',
        color: '#333'
      }}>
        基本信息
      </div>

      {/* 与您的关系 */}
      <div style={{
        margin: '0 16px 20px',
        padding: '16px',
        background: '#f8f8f8',
        borderRadius: '8px'
      }}>
        <div style={{
          fontSize: '16px',
          color: '#333',
          marginBottom: '12px'
        }}>
          与您的关系
        </div>
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: '8px'
        }}>
          {relationships.map((rel) => (
            <button
              key={rel}
              onClick={() => handleRelationshipSelect(rel)}
              style={{
                padding: '8px 16px',
                borderRadius: '20px',
                border: '1px solid #d9d9d9',
                background: formData.relationship === rel ? '#1677ff' : '#fff',
                color: formData.relationship === rel ? '#fff' : '#666',
                fontSize: '14px',
                cursor: 'pointer'
              }}
            >
              {rel}
            </button>
          ))}
        </div>
      </div>

      {/* 表单字段 */}
      <div style={{ padding: '0 16px' }}>
        {/* 姓名 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          padding: '16px 0',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>
          <span style={{ 
            width: '80px', 
            fontSize: '16px', 
            color: '#333' 
          }}>
            姓名
          </span>
          <Input
            placeholder="请输入真实姓名"
            value={formData.name}
            onChange={(value) => handleInputChange('name', value)}
            style={{ flex: 1 }}
          />
        </div>

        {/* 身份证号 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          padding: '16px 0',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>
          <span style={{ 
            width: '80px', 
            fontSize: '16px', 
            color: '#333' 
          }}>
            身份证号
          </span>
          <Input
            placeholder="请输入身份证号码"
            value={formData.idNumber}
            onChange={(value) => handleInputChange('idNumber', value)}
            style={{ flex: 1 }}
          />
        </div>

        {/* 出生日期 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          padding: '16px 0',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>
          <span style={{ 
            width: '80px', 
            fontSize: '16px', 
            color: '#333' 
          }}>
            出生日期
          </span>
          <div 
            onClick={handleDatePickerShow}
            style={{ 
              flex: 1, 
              color: formData.birthDate ? '#333' : '#999',
              fontSize: '16px',
              cursor: 'pointer',
              padding: '8px 0'
            }}
          >
            {formData.birthDate || '请选择'}
          </div>
        </div>

        {/* 性别 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          padding: '16px 0',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>
          <span style={{ 
            width: '80px', 
            fontSize: '16px', 
            color: '#333' 
          }}>
            性别
          </span>
          <div style={{ flex: 1, display: 'flex', gap: '12px' }}>
            <button
              onClick={() => handleInputChange('gender', '男')}
              style={{
                padding: '8px 20px',
                borderRadius: '6px',
                border: '1px solid #d9d9d9',
                background: formData.gender === '男' ? '#1677ff' : '#fff',
                color: formData.gender === '男' ? '#fff' : '#666',
                fontSize: '16px',
                cursor: 'pointer'
              }}
            >
              男
            </button>
            <button
              onClick={() => handleInputChange('gender', '女')}
              style={{
                padding: '8px 20px',
                borderRadius: '6px',
                border: '1px solid #d9d9d9',
                background: formData.gender === '女' ? '#1677ff' : '#fff',
                color: formData.gender === '女' ? '#fff' : '#666',
                fontSize: '16px',
                cursor: 'pointer'
              }}
            >
              女
            </button>
          </div>
        </div>

        {/* 联系方式 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          padding: '16px 0',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>
          <span style={{ 
            width: '80px', 
            fontSize: '16px', 
            color: '#333' 
          }}>
            联系方式
          </span>
          <Input
            value={formData.phone}
            onChange={(value) => handleInputChange('phone', value)}
            style={{ flex: 1 }}
          />
        </div>
      </div>

      {/* 底部保存按钮 */}
      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        padding: '16px',
        background: '#fff',
        borderTop: '1px solid #f0f0f0'
      }}>
        <Button
          color="primary"
          onClick={handleSave}
          style={{
            width: '100%',
            height: '48px',
            borderRadius: '8px',
            fontSize: '16px',
            fontWeight: 'bold'
          }}
        >
          保存
        </Button>
      </div>

      {/* 底部占位，避免内容被按钮遮挡 */}
      <div style={{ height: '80px' }} />

      {/* 日期选择器 */}
      {showDatePicker && (
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          background: 'rgba(0, 0, 0, 0.5)',
          zIndex: 1000
        }}>
          <div style={{
            background: '#fff',
            borderTopLeftRadius: '12px',
            borderTopRightRadius: '12px',
            padding: '20px 16px'
          }}>
            {/* 日期选择器头部 */}
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '24px'
            }}>
              <button
                onClick={handleDatePickerCancel}
                style={{
                  background: 'transparent',
                  border: 'none',
                  color: '#666',
                  fontSize: '16px',
                  cursor: 'pointer',
                  padding: '8px'
                }}
              >
                取消
              </button>
              <span style={{
                fontSize: '16px',
                fontWeight: 'bold',
                color: '#333'
              }}>
                选择出生日期
              </span>
              <button
                onClick={handleDatePickerConfirm}
                style={{
                  background: 'transparent',
                  border: 'none',
                  color: '#1677ff',
                  fontSize: '16px',
                  cursor: 'pointer',
                  padding: '8px'
                }}
              >
                确定
              </button>
            </div>

            {/* 日期选择器内容 */}
            <div style={{
              display: 'flex',
              justifyContent: 'space-around',
              height: '200px',
              position: 'relative'
            }}>
              {/* 年份选择器 */}
              <div style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
              }}>
                <div style={{
                  height: '200px',
                  overflow: 'hidden',
                  position: 'relative'
                }}>
                  <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    transform: `translateY(${100 - selectedDate.year * 2}px)`,
                    transition: 'transform 0.3s ease'
                  }}>
                    {generateYears().map((year) => (
                      <div
                        key={year}
                        onClick={() => handleDateChange('year', year)}
                        style={{
                          height: '40px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '16px',
                          color: selectedDate.year === year ? '#1677ff' : '#333',
                          fontWeight: selectedDate.year === year ? 'bold' : 'normal',
                          cursor: 'pointer',
                          minWidth: '80px'
                        }}
                      >
                        {year}年
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* 月份选择器 */}
              <div style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
              }}>
                <div style={{
                  height: '200px',
                  overflow: 'hidden',
                  position: 'relative'
                }}>
                  <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    transform: `translateY(${100 - selectedDate.month * 2}px)`,
                    transition: 'transform 0.3s ease'
                  }}>
                    {generateMonths().map((month) => (
                      <div
                        key={month}
                        onClick={() => handleDateChange('month', month)}
                        style={{
                          height: '40px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '16px',
                          color: selectedDate.month === month ? '#1677ff' : '#333',
                          fontWeight: selectedDate.month === month ? 'bold' : 'normal',
                          cursor: 'pointer',
                          minWidth: '60px'
                        }}
                      >
                        {month.toString().padStart(2, '0')}月
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* 日期选择器 */}
              <div style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
              }}>
                <div style={{
                  height: '200px',
                  overflow: 'hidden',
                  position: 'relative'
                }}>
                  <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    transform: `translateY(${100 - selectedDate.day * 2}px)`,
                    transition: 'transform 0.3s ease'
                  }}>
                    {generateDays().map((day) => (
                      <div
                        key={day}
                        onClick={() => handleDateChange('day', day)}
                        style={{
                          height: '40px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: '16px',
                          color: selectedDate.day === day ? '#1677ff' : '#333',
                          fontWeight: selectedDate.day === day ? 'bold' : 'normal',
                          cursor: 'pointer',
                          minWidth: '60px'
                        }}
                      >
                        {day.toString().padStart(2, '0')}日
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* 选中日期显示 */}
            <div style={{
              textAlign: 'center',
              marginTop: '16px',
              fontSize: '14px',
              color: '#666'
            }}>
              已选择: {selectedDate.year}年 {selectedDate.month.toString().padStart(2, '0')}月 {selectedDate.day.toString().padStart(2, '0')}日
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default Index
